<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #div1 {
            width:712px;
            height:108px;
            margin:100px auto;
            position:relative;
            background:red;
            border: 2px solid #f60;
            overflow:hidden;
        }
        #div1 ul {
            position:absolute;
            left:0;
            top:0;
        }
        #div1 ul li {
            float:left;
            width:178px;
            height:108px;
            list-style:none;
        }

    </style>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
    </ul>
</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        var tags = $("#div1 ul").html();
        $("#div1 ul").html(tags + tags + tags);
        var tagsWidth = $("#div1 ul li").width() * $("#div1 ul li").length;
        $("#div1 ul").width(tagsWidth);

        var left = $("#div1 ul").position().left;
        var num = 2;
        function speed() {
            left = left + num;
            if(left < -$("#div1 ul").outerWidth() / 2){
                left = 0;
            }
            if(left > 0){
                left = -$("#div1 ul").outerWidth() / 2;
            }
            $("#div1 ul").css("left",left)
        }
        setInterval(speed,30);

        $("a").eq(0).click(function () {
            num = -2;
        })

        $("a").eq(1).click(function () {
            num = 2;
        })
    })
</script>